import React, { Component } from 'react'
import style from './index.module.css'
import SVG from '../../img/svg.png'
import next from '../../img/next.png';
export default class Page extends Component {
    render() {
        return (
            <div className='page-container page flex-page' style={{ top: (this.props.page * 100) + '%' }}>
                <div className={style.container1} style={{ transform: `translateX(${this.props.percent - 100}%)` }}>
                    <img src={SVG} alt='' className={style.svg}></img>
                    <span className={style.text}><b>可缩放矢量图形（Scalable Vector Graphics，SVG）</b>，是一种用于描述基于二维的矢量图形的，基于 XML 的标记语言。本质上，SVG 相对于图像，就好比 HTML 相对于文本。</span>
                </div>
                <div className={style.container1} style={{ transform: `translateX(${(100 - this.props.percent) * 2.5}%)` }}>
                    <ul>
                        <li>1999 W3C开放SVG标准</li>
                        <li>2001 SVG 1.0 成为 W3C 推荐</li>
                        <li>2003 SVG 1.1 成为 W3C 推荐</li>
                        <li>SVG 1.2 在之后的几年中一直处于工作草稿的状态</li>
                        <li>SVG 2.0 将会完全重写 SVG 1.2，以加入更多诸如 CSS，HTML5 的新特性</li>
                    </ul>
                </div>
                <div className={style.container1} style={{ transform: `translateX(${(this.props.percent - 100)}%)` }}>
                    <ul>
                        <li>Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制</li>
                        <li>SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景</li>
                    </ul>
                </div>
                <div className={style.container1} style={{ transform: `translateX(${(100 - this.props.percent) * 2.5}%)` }}>
                    <p><b>一个SVG实例(128px × 128px)</b></p>
                    <p>
                        <svg className={style.svgObj} viewBox="0 0 1024 1024" width="128" height="128">
                            <path d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z" p-id="5032" />
                            <path d="M688 480a32 32 0 0 1 0 64h-416a32 32 0 0 1 0-64h416z" p-id="5033" />
                            <path d="M707.072 512l-151.36-170.784a32 32 0 1 1 47.872-42.432l170.208 192a32 32 0 0 1 0 42.432l-170.24 192a32 32 0 1 1-47.872-42.432L707.072 512z" p-id="5034" />
                        </svg>
                        <span>next.svg(924 B)</span>
                        <span style={{ float: 'right' }}>
                            <img src={next} alt=''></img>
                            <span>next.png(4,573 B)</span>
                        </span>

                    </p>
                    <pre className={style.code}>
                        <code>
                            {`
<svg viewBox="0 0 1024 1024" width="128" height="128">
    <path d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z" p-id="5032"></path>
    <path d="M688 480a32 32 0 0 1 0 64h-416a32 32 0 0 1 0-64h416z" p-id="5033"></path>
    <path d="M707.072 512l-151.36-170.784a32 32 0 1 1 47.872-42.432l170.208 192a32 32 0 0 1 0 42.432l-170.24 192a32 32 0 1 1-47.872-42.432L707.072 512z" p-id="5034"></path>
</svg>
                        `}
                        </code></pre>
                </div>
                <div className='title' style={{ transform: `translateX(${this.props.percent - 100}%)` }}>简介</div>
            </div>
        )
    }
}
